<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>资源管理</span>
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span>平台管理</span>
    </div>
    <div class="row">
      <div class="col-md-12">
        <form id="searchForm" class="form-inline">
          <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">平台名称、平台ID</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="平台名称、平台ID" name="plat" v-model.trim="plat">
          </div>          
          <button type="button" v-on:click="loadData" class="btn btn-default">搜索</button>
          <router-link :to="{ name: 'AddPlat', params: { method: 'add', platId: 0 } }" class="btn btn-default">添加下级平台</router-link> 
          <span class="name" id="basePlatName">本级平台名：{{platName}}</span>
        </form>
        <div class="table-responsive sbzgl-tab-list">
          <table class="table table-bordered" id="tblDevice">
            <thead>
              <tr>
                <th width="5%">序号</th>
                <th width="20%">平台名</th>
                <th width="20%">平台ID</th>
                <th width="12%">上级／下级平台</th>
                <th width="15%">服务器IP</th>
                <th width="10%">服务器端口</th>
                <th width="15%">操作</th> 
              </tr>
            </thead>
            <tbody> 
              <tr v-for="(item, index) in page.list">
                <td>{{page.limit*(page.pageNum-1)+index+1}}</td>
                <td><a href="#">{{item.platformname}}</a></td>
                <td>{{item.platformid}}</td>
                <td>{{platLevel[item.lvl]}}</td>
                <td>{{item.ip}}</td>
                <td>{{item.port}}</td>
                <td>
                <router-link :to="{ name: 'AddPlat', params: { method: 'edit', platId: item.platformid } }"><span class="glyphicon glyphicon-edit"></span></router-link>&nbsp;
                <a href="javascript:;" v-on:click="del(item.platformid)" title="删除"><span class="glyphicon glyphicon-trash"></span></a>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="pull-right">
            <my-page v-bind:pageNum="page.pageNum" v-bind:totalPageNum="page.totalPageNum" v-bind:totalNum="page.totalNum" v-bind:pageData="pageData" v-bind:allList="page.allList" v-bind:limit="page.limit"></my-page>
          </div>
        </div>
      </div>
    </div>    
  </div>
</template>

<script>
  import myPage from '@/components/Page.vue'

  export default {
    name: 'cmsServer',
    components: { 'my-page': myPage },
    data: function () {
      return {
        page: {
          list: [],
          allList: [],
          pageNum: 1,
          totalPageNum: 0,
          totalNum: 0,
          limit: 10
        },
        platLevel: {
          '-1': '上级平台',
          '0': '本级平台',
          '1': '下级平台'
        },
        platName: '',
        plat: ''
      }
    },
    created: function () {
      // 获取平台名称
      var platName = window.duang.getData('platName')
      if (platName) {
        this.platName = platName
      } else {
        this.$http.post('/api/hedacmdreq', {method: 'PlatInfo'}).then(response => {
          var body = response.data.HedaACK.Body
          this.platName = body.platformname
          window.duang.setData('platName', this.platName)
        })
      }
      // 获取列表数据
      this.loadData()
    },
    methods: {
      loadData: function () {
        this.$http.post('/api/hedacmdreq', {method: 'PlatList', plat: this.plat}).then(response => {
          this.page.allList = response.data.HedaACK.Body.platformlist || []
          this.page.totalNum = this.page.allList.length || 0
          this.page.totalPageNum = Math.ceil(this.page.totalNum / this.page.limit)
        })
      },
      pageData: function (showList, pageNum) {
        this.page.pageNum = pageNum
        this.page.list = showList
      },
      del: function (platformid) {
        this.$http.post('/api/hedacmdreq', {method: 'DeletePlat', platid: platformid}).then(response => {
          window.duang.msg(true, response.data.HedaACK.Body.retMsg)
          this.loadData()
        })
      }
    }
  }
</script>
